//参数监控
<template>
    <div class="container">
        <div v-for="(item,index) in menu_list" :key="index">
            <div v-on:click="changeContent(index)">
                <mt-cell :title="item.name" is-link>
                </mt-cell>
            </div>

            <div v-show="item.show" v-on:click="openPopup">
                <div v-for="(item,index) in item.detail" :key="index">
                    <mt-cell :title="item.name">
                        <p class="temp">{{item.temp}}</p>
                        <span>{{item.between}}</span>
                    </mt-cell>
                </div>

            </div>

        </div>
        <mt-popup v-model="popupVisible" class="popup">
            <mt-header>
                <router-link to="/" slot="left">
                    <mt-button icon="back" v-on:click="closeOpen">返回</mt-button>
                </router-link>
                <!--<mt-button icon="more" slot="right"></mt-button>-->
            </mt-header>
            <div class="pop-container">
                <div class="flex-2">
                    <div>
                        <p>80 kPa</p>
                        <p>±0 4%</p>
                    </div>
                    <div>
                        <p>最高 83</p>
                        <p>最低 76</p>
                    </div>
                    <div>
                        <p>平均 83</p>
                        <p>平均 76</p>

                    </div>
                    <div>
                        <p>超限评率 5</p>
                        <p>超限评率 75～82</p>
                    </div>

                </div>
            </div>
            <div class="pop-content">
                <div class="pop-content-header">
                    <mt-navbar v-model="selected" class="mt-tab-item">
                        <mt-tab-item id="1">分时</mt-tab-item>
                        <mt-tab-item id="2">日</mt-tab-item>
                        <mt-tab-item id="3">周</mt-tab-item>
                        <mt-tab-item id="4">月</mt-tab-item>
                        <mt-tab-item id="5">...</mt-tab-item>
                    </mt-navbar>
                </div>
                <mt-tab-container>
                    <mt-tab-container-item>
                        <div class="flex-tag">
                            <div>
                                <i class="fa fa-bell" aria-hidden="true"></i>
                                <i class="fa fa-heart" aria-hidden="true"></i>
                                <i class="fa fa-plus-circle" aria-hidden="true"></i>
                            </div>
                        </div>

                        <div id="kOne" class="k-one">
                            123
                        </div>
                        <div class="pop-bottom">
                            <div class="flex-container">
                                <div class="flex" v-for="(item,index) in msg" :key="index">
                                    <div>
                                        <p>{{item.time}}</p>
                                    </div>
                                    <div>
                                        <p>{{item.user_name}}</p>
                                    </div>
                                    <div>
                                        <p>{{item.msg}}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="flex-button">
                                <div>
                                    <mt-button type="default">截图</mt-button>
                                </div>
                                <div>
                                    <mt-button type="default">批量录入及发送</mt-button>
                                </div>

                            </div>


                        </div>

                    </mt-tab-container-item>




                </mt-tab-container>


            </div>
        </mt-popup>
        <div class="replace">

        </div>
    </div>
</template>

<script>
  import echarts from "echarts";

  export default {
    name: "firingParams",

  data()
  {
    return {
      flag: false,
      popupVisible: false,
      selected: '1',
      li_list_data: ['分时', '日', '周', '月', '...'],
      height_data: [80, 80, 80, 80, 80, 80, 80, 80, 80],
      low_data: [50, 50, 50, 50, 50, 50, 50, 50, 50],
      actual_data: [40, 50, 60, 70, 75, 76, 77, 55, 90],

      data_x: ['2018/01/02', '2018/01/03', '2018/01/04', '2018/01/05', '2018/01/06', '2018/01/07', '2018/01/08', '2018/01/09', '2018/01/10'],
      msg: [{
        time: '19:00',
        user_name: 'JHON',
        msg: '白班注意休息时间，影响K1'
      },
        {
          time: '19:00',
          user_name: 'JHON',
          msg: '白班注意休息时间，影响K1'
        },
        {
          time: '19:00',
          user_name: 'JHON',
          msg: '白班注意休息时间，影响K1'
        }],
      menu_list: [
        {
          name: '烧结机',
          detail: [{
            name: '点火煤气压力下限',
            temp: '150℃',
            between: '120～200'
          },
            {
              name: '保温煤气压力下限',
              temp: '150℃',
              between: '120～200'
            },
            {
              name: '助燃空气压力下限',
              temp: '150℃',
              between: '120～200'
            },
            {
              name: '5号机BTP温度',
              temp: '150℃',
              between: '120～200'
            },
            {
              name: '5号机北大烟道温度',
              temp: '150℃',
              between: '120～200'
            },
            {
              name: '5号机南大烟道温度',
              temp: '150℃',
              between: '120～200'
            },
            {
              name: '烧结机负压',
              temp: '150℃',
              between: '120～200'
            },
            {
              name: '烧结机运行电流上限',
              temp: '150℃',
              between: '120～200'
            },

          ],
          show: false
        },
        {
          name: '环冷机',
          detail: [{
            name: '环冷机运行电流上限',
            temp: '150℃',
            between: '120～200'
          },
          ],
          show: false

        },
        {
          name: '整粒皮带',
          detail: [{
            name: '成-1皮带烧结矿温度',
            temp: '150℃',
            between: '120～200'
          },
          ],
          show: false

        },
        {
          name: '风机房水泵房',
          detail: [{
            name: '冷水池水位低下限报警',
            temp: '150℃',
            between: '120～200'
          },
          ],
          show: false

        },
        {
          name: '一混吸水池',
          detail: [{
            name: '集气管温度',
            temp: '150℃',
            between: '120～200'
          },
            {
              name: '水池水位低下限报警',
              temp: '150℃',
              between: '120～200'
            },
          ],
          show: false

        },
        {
          name: '湿式除尘器水池',
          detail: [{
            name: '水池水位低下限报警',
            temp: '150℃',
            between: '120～200'
          },
          ],
          show: false

        }

      ]
    };

  }
  ,
  mounted()
  {

    this.$nextTick(() => {
      const myChart_k =  this.myChart_k = echarts.init(document.getElementById("kOne"));

      const option_k = {
        title: {
          text: 'K1',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.data_x,
          axisLabel: {
            rotate: 50
          }
        },
        yAxis: {
          type: 'value'
        },
        dataZoom: [{
          type: 'inside',
          start: 0,
          end: 10
        }, {
          start: 0,
          end: 10,
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          }
        }],
        series: [
          {
            name: '最高',
            type: 'line',
            stack: '总量',
            data: this.height_data
          },
          {
            name: '最低',
            type: 'line',
            stack: '总量',
            data: this.low_data
          },
          {
            name: '实际值',
            type: 'line',
            stack: '总量',
            data: this.actual_data
          }
        ]

      };
      myChart_k.setOption(option_k);

    })
  }
  ,
  methods: {
    changeContent(index)
    {
      this.menu_list[index].show = !this.menu_list[index].show;
    }
  ,
    openPopup()
    {
      this.popupVisible = true;
      this.$nextTick(() => {
        this.myChart_k.resize();
      })
    }
  ,
    closeOpen()
    {
      this.popupVisible = false;
    }
  }
  }
  ;
</script>

<style lang="scss" scoped>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container {
        width: 100%;
    }

    .pop-content-header ul {
        overflow: hidden;
        list-style: none;
        border-bottom: 1px solid #b5edff;
    }

    .pop-content-header li {
        width: 20%;
        text-align: center;
        height: 30px;
        line-height: 30px;
    }

    .temp {
        /*background: green;*/
        padding: 5px;
        /*color: #fff*/

    }

    .active {
        text-decoration: underline;
        text-decoration-color: #000;
    }

    .pop-header {
        overflow: hidden;
        padding: 10px;
    }

    .flex-2 {
        display: flex;
        height: 60px;
        & > div {
            flex: 2;
            height: 30px;
            line-height: 30px;
        }
        div:nth-child(4) {
            flex: 4;
        }
    }

    .flex-container {
        height: 200px;
        /*background: #26a2ff;*/
        overflow: auto;
    }

    .flex {
        display: flex;
        padding-left: 10px;

        & > div {
            & > p {
                height: 30px;
                line-height: 30px;
            }
        }
        div:nth-child(1) {
            flex: 2;

        }
        div:nth-child(2) {
            flex: 2;
        }
        div:nth-child(3) {
            flex: 7;
        }
    }

    .pop-header p {
        height: 30px;
        line-height: 30px;
    }

    .k-one {
        position: relative;
        z-index: 2004;
        width: 100vw;
        height: 300px;
        margin: 0 auto;
    }

    .popup {
        width: 100%;
        height: 100%;
    }

    .mint-tab-item-label {
        font-size: 14px;
    }

    .flex-button {
        display: flex;
        padding: 20px;
        & > div {
            flex: 2;
        }
    }

    .replace {
        width: 100vw;
        height: 28px;
    }

    .flex-tag {
        display: flex;
        justify-content: flex-end;
    }

</style>
